<template>
	<view class="container">
		<u-navbar leftIconColor="#fff" placeholder :autoBack="true">
			<template #center>
				<view class="pad-left-right-10 mar-left-50 search">
					<u-search @search="hanldeSearch" :showAction="false" placeholder="请输入搜索内容"
						v-model="keyword"></u-search>
				</view>
			</template>
		</u-navbar>

		<view class="pad-left-right-26">
			<notice-list v-if="listNotice.length > 0" :list="listNotice" class="mar-top-32"></notice-list>
			<u-empty marginTop="100" v-if="listNotice.length == 0" icon="../../static/image/empty.png"></u-empty>
			<view class="pad-bottom-30">
				<u-loadmore v-if="listNotice.length > 0" :status="pageStatus" color="#df0007" iconColor="#df0007" />
			</view>
		</view>
	</view>
</template>

<script>
	// 接口地址
	import {
		noticePageList
	} from '@/config/api.js'

	export default {
		data() {
			return {
				page: 1,
				ps: 10,
				keyword: '',
				s_title: '',
				listNotice: []
			}
		},
		// 上拉加载
		onReachBottom() {
			if (this.pageData.next_page_url) {
				this.getNoticePageList();
			}
		},
		onLoad(options) {
			if (options.name) {
				this.keyword = options.name;
				this.s_title = options.name;
				this.getNoticePageList();
			}
		},
		methods: {
			// 触发搜索事件
			hanldeSearch(e) {
				this.page = 1;
				this.listNotice = [];
				this.s_title = e;
				this.getNoticePageList();
			},
			// 获取公告列表
			getNoticePageList() {
				this.pageStatus = 'loading'
				noticePageList({
					ps: this.ps,
					page: this.page,
					s_title: this.s_title,
				}).then(res => {

					let {
						data
					} = res;
					this.pageStatus = 'loadmore'

					this.pageData = data;
					this.page = data.current_page + 1;
					this.listNotice = this.listNotice.concat(data.data)

					// 没有更多了
					if (data.next_page_url == null) {
						this.pageStatus = 'nomore'
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		height: 100vh;
		
		::v-deep .u-navbar__content {
			background-image: url('../../static/image/my-bg.png');
			background-size: cover;
			background-repeat: no-repeat;
			background-color: #f5f5f5;
		}
	}

	.search {
		.u-search {
			width: 600rpx;
		}
	}
</style>